<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Notification 通知</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">Element Plus 注册了 $notify 方法并且它接受一个 Object 作为其参数。 在最简单的情况下，你可以通过设置 title 和 message 属性来设置通知的标题和正文内容。 默认情况下，通知在4500毫秒后自动关闭，但你可以通过设置 duration 属性来自定义通知的展示时间。 如果你将它设置为 0，那么通知将不会自动关闭。 需要注意的是 duration 接收一个 Number，单位为毫秒。</p>
	<el-button plain @click="open11">自动关闭的提示</el-button>
	<el-button plain @click="open12">不会自动关闭的提示</el-button>
	
	
	<el-divider content-position="left">不同类型的通知</el-divider><!-- =============================================================== -->
	<p class="desc">我们提供了四种不同类型的提醒框：success、warning、info 和error。</p>
	<p class="desc">Element Plus 为 Notification 组件准备了四种通知类型：success, warning, info, error。 他们可以设置 type 字段来修改，除上述的四个值之外的值会被忽略。 同时，我们也为 Notification 的各种 type 注册了单独的方法，可以在不传入 type 字段的情况下像 open3 和 open4 那样直接调用。</p>
	<el-button @click="open21"> Success </el-button>
	<el-button @click="open22"> Warning </el-button>
	<el-button @click="open23"> Info </el-button>
	<el-button @click="open24"> Error </el-button>
	
	<el-divider content-position="left">自定义消息弹出的位置</el-divider><!-- =============================================================== -->
	<p class="desc">可以让 Notification 从屏幕四角中的任意一角弹出</p>
	<p class="desc">使用 position 属性设置 Notification 的弹出位置， 支持四个选项：top-right、top-left、bottom-right 和 bottom-left， 默认为 top-right。</p>
	<el-button @click="open31"> Top Right </el-button>
	<el-button @click="open32"> Bottom Right </el-button>
	<el-button @click="open33"> Bottom Left </el-button>
	<el-button @click="open34"> Top Left </el-button>
	
	<el-divider content-position="left">有位置偏移的通知栏</el-divider><!-- =============================================================== -->
	<p class="desc">能够设置偏移量来使 Notification 偏移默认位置。</p>
	<p class="desc">Notification 提供设置偏移量的功能，通过设置 offset 字段，可以使弹出的消息距屏幕边缘偏移一段距离。 注意在同一时刻，每一个的 Notification 实例应当具有一个相同的偏移量。</p>
	<el-button @click="open41"> Notification with offset </el-button>
	
	<el-divider content-position="left">使用 HTML 片段作为正文内容</el-divider><!-- =============================================================== -->
	<p class="desc">message 支持传入 HTML 字符串来作为正文内容。</p>
	<p class="desc">将 dangerouslyUseHTMLString 属性设置为 true，message 属性就会被当作 HTML 片段处理。</p>
	<el-button @click="open51"> Use HTML String </el-button>
	
	<el-divider content-position="left">隐藏关闭按钮</el-divider><!-- =============================================================== -->
	<p class="desc">通知的关闭按钮可以被设置为隐藏。</p>
	<p class="desc">将 showClose 属性设置为 false 即可隐藏关闭按钮。</p>
	<el-button @click="open61"> Hide close button </el-button>
	
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			message: 'Hello Vue!!'
		}
	},
	methods:{
		open11(){
			this.$notify({
				title: '温馨提示',
				// message: '在 duration 毫秒后关闭',
				message: Vue.h('i', { style: 'color: red' }, '在 duration 毫秒后关闭'),
				duration: 2000,
				// type: 'success',
			})
		},
		open12(){
			ElementPlus.ElNotification({
				title: '温馨提示',
				message: '这是一条不会自动关闭的消息',
				duration: 0,
			})
		},
		
		open21(){
			// this.$notify({
			// 	title: '温馨提示21',
			// 	message: "成功提示消息。",
			// 	type: 'success',
			// })
			ElementPlus.ElNotification({
				title: '温馨提示21',
				message: '成功提示消息',
				type: 'success',
			})
		},
		open22(){
			// this.$notify({
			// 	title: '警告提示22',
			// 	message: "警告提示消息。",
			// 	type: 'warning',
			// })
			ElementPlus.ElNotification.warning({
				title: '警告提示22',
				message: '警告提示消息',
			})
		},
		open23(){
			this.$notify({
				title: '普通提示23',
				message: "警告提示消息",
				type: 'info',
			})
		},
		open24(){
			this.$notify.error({
				title: '错误提示24',
				message: "错误提示消息",
			})
		},
		
		open31(){
			this.$notify({
				title: '温馨提示31',
				message: "默认是top-right，右上",
			})
		},
		open32(){
			this.$notify({
				title: '温馨提示32',
				message: "bottom-right",
				position: 'bottom-right',
			})
		},
		open33(){
			this.$notify({
				title: '温馨提示33',
				message: "bottom-left",
				position: 'bottom-left',
			})
		},
		open34(){
			this.$notify({
				title: '温馨提示34',
				message: "top-left",
				position: 'top-left',
			})
		},
		
		open41(){
			this.$notify({
				title: '温馨提示41',
				message: "有位置偏移的通知",
				offset: 100,
			})
		},
		open51(){
			this.$notify({
				title: '温馨提示51',
				dangerouslyUseHTMLString: true,
				message: "<strong>This is <i>HTML</i> string</strong>",
			})
		},
		open61(){
			this.$notify({
				title: '温馨提示61',
				message: "隐藏关闭按钮",
				showClose: false,
			})
		},
		
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");

</script>
</html>